<template>
  <div class="popover" @mouseover="visible=true" @mouseout="visible=false">
    <div class="content-wrapper" v-show="visible">
        <slot name="content"></slot>
    </div>
    <slot></slot>
  </div>
</template>

<script>
export default {
  data(){
      return{
          visible:false
      }
  }
}
</script>

<style scoped lang="less">
.popover{
    position: relative;
    display: inline-block;
    vertical-align: top;
    .content-wrapper{
        position: absolute;
        line-height: 1.2em;
        width: max-content;
        font-size: .8em;
        top: 10%;
        left: 160%;
        padding: 1em;
        background: rgb(245, 245, 245);
        border-radius: .4em;
        box-shadow: 2px 2px 3px rgb(236, 236, 236)
    }
    .content-wrapper::before{
        content: ' ';
        position: absolute;
        left: -2em;
        top: 50%;
        transform: translate(0, -50%);
        border-width: 1em;
        width: 0;
        border-style: solid;
        border-color: transparent rgb(245, 245, 245) transparent transparent;
        height: 0;
    }
}
</style>
